<template>
  <div class="order-box">
    <a-upload
      @success="progessHandle(item)"
      v-for="(item, index) in list"
      :key="index"
      :custom-request="(file) => uploadRequest(item, file)"
    >
      <template #upload-button>
        <div class="box-item">
          <div class="box-btn">
            <a-button @click="downloadTemplate(item.templateURL)" type="primary">
              <template #icon>
                <icon-download />
              </template>
              下载模板
            </a-button>
          </div>
          <div>
            <p class="box-text">{{ item.name }}</p>
            <p class="box-text">点击或者拖拽表格到此处</p>
          </div>
        </div>
      </template>
    </a-upload>
  </div>
</template>

<script lang="ts" setup>
  import { useGlobSetting } from '@/hooks/setting';
  import { Notification } from '@arco-design/web-vue';
  import { uploadBusinessFile } from '@/api/business/index';
  import { downloadByData } from '@/utils/file/download';
  import { addTimestampUrl } from '@/utils/urlUtils';

  const globSetting = useGlobSetting();
  const { apiUrl, urlPrefix1, exportUrl } = globSetting;
  const uploadURL = apiUrl + urlPrefix1;

  const list = [
    {
      name: '美团蛋糕结算',
      templateURL: exportUrl + '美团蛋糕结算账单.xlsx',
      uploadURL: `${uploadURL}/mt/cake/settlement/bill/importExcel`,
    },
    {
      name: '美团蛋糕补单',
      templateURL: exportUrl + '美团蛋糕补单账单.xlsx',
      uploadURL: `${uploadURL}/cake/supply/bill/importExcel?type=mt`,
    },
    {
      name: '抖音蛋糕结算',
      templateURL: exportUrl + '抖音蛋糕结算账单.xlsx',
      uploadURL: `${uploadURL}/tk/cake/settlement/bill/importExcel`,
    },
    {
      name: '抖音蛋糕补单',
      templateURL: exportUrl + '抖音蛋糕补单账单.xlsx',
      uploadURL: `${uploadURL}/cake/supply/bill/importExcel?type=tk`,
    },
    {
      name: '快手蛋糕结算',
      templateURL: exportUrl + '快手蛋糕结算账单.xlsx',
      uploadURL: `${uploadURL}/ks/cake/settlement/bill/importExcel`,
    },
    {
      name: '快手蛋糕补单',
      templateURL: exportUrl + '快手蛋糕补单账单.xlsx',
      uploadURL: `${uploadURL}/cake/supply/bill/importExcel?type=ks`,
    },
    {
      name: '小时达蛋糕结算',
      templateURL: exportUrl + '小时达蛋糕结算账单.xlsx',
      uploadURL: `${uploadURL}/xsd/cake/settlement/bill/importExcel`,
    },
    {
      name: '小时达蛋糕补单',
      templateURL: exportUrl + '小时达蛋糕补单账单.xlsx',
      uploadURL: `${uploadURL}/cake/supply/bill/importExcel?type=xsd`,
    },
  ];

  // const list = [
  //   {
  //     name: '美团鲜花结算',
  //     templateURL: exportUrl + '美团鲜花结算账单.xlsx',
  //     uploadURL: `${uploadURL}/mt/flower/settlement/bill/importExcel`,
  //   },
  //   {
  //     name: '美团鲜花补单',
  //     templateURL: exportUrl + '美团鲜花补单账单.xlsx',
  //     uploadURL: `${uploadURL}/mt/flower/supply/bill/importExcel`,
  //   },
  //   {
  //     name: '美团蛋糕结算',
  //     templateURL: exportUrl + '美团蛋糕结算账单.xlsx',
  //     uploadURL: `${uploadURL}/mt/cake/settlement/bill/importExcel`,
  //   },
  //   {
  //     name: '美团蛋糕补单',
  //     templateURL: exportUrl + '美团蛋糕补单账单.xlsx',
  //     uploadURL: `${uploadURL}/mt/cake/supply/bill/importExcel`,
  //   },
  //   {
  //     name: '抖音鲜花结算',
  //     templateURL: exportUrl + '抖店鲜花结算账单.xlsx',
  //     uploadURL: `${uploadURL}/tk/flower/settlement/bill/importExcel`,
  //   },
  //   {
  //     name: '抖音鲜花补单',
  //     templateURL: exportUrl + '抖店鲜花补单账单.xlsx',
  //     uploadURL: `${uploadURL}/tk/flower/supply/bill/importExcel`,
  //   },
  //   {
  //     name: '抖音气球结算',
  //     templateURL: exportUrl + '抖音告白气球结算账单.xlsx',
  //     uploadURL: `${uploadURL}/tk/balloon/settlement/billl/importExcel`,
  //   },

  //   {
  //     name: '饿了么鲜花补单',
  //     templateURL: exportUrl + '饿了么补单账单.xlsx',
  //     uploadURL: `${uploadURL}/elm/supply/bill/importExcel`,
  //   },
  // ];

  const uploadRequest = (item, fileData) => {
    return uploadBusinessFile({
      url: item.uploadURL,
      file: fileData.fileItem.file,
    }).then((res) => {
      const reader = new FileReader();
      reader.readAsText(res.data, 'utf-8');
      reader.onload = function () {
        try {
          const response = JSON.parse(reader.result as string);
          if (response.msg) {
            if (response.code == 200) {
              Notification.success({
                title: '操作成功',
                content: `上传${item.name}成功`,
                closable: true,
                duration: 0,
              });
            } else {
              Notification.error({
                title: '操作失败',
                content: response.msg,
                closable: true,
                duration: 0,
              });
            }
          }
        } catch (err) {
          downloadByData(res.data, `${item.name}.xlsx`);
        }
      };
    });
  };

  const downloadTemplate = (url) => {
    window.location.href = addTimestampUrl(url);
  };

  const progessHandle = (item) => {
    Notification.success({
      title: '操作成功',
      content: `上传${item.name}成功`,
      closable: true,
      duration: 0,
    });
  };
</script>

<style lang="less" scoped>
  /deep/ .arco-upload-list {
    display: none;
  }

  .order-box {
    padding: 45px 0;
    width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    row-gap: 20px;
  }

  .box-item {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 240px;
    height: 233px;
    border-radius: 14px;
    background: #e0eaff;
  }

  .box-btn {
    position: absolute;
    top: 15px;
    right: 15px;
  }

  .box-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    color: #434141;
  }
</style>
